<template>
  <div class="login-layout" v-loading="loading" element-loading-text="登录中。。。">
    <div class="login-wrap">
      <div class="login-form">
        <div class="login-title">登录</div>
        <el-form :model="loginForm" :rules="rules" ref="loginForm">
          <el-form-item prop="loginName">
            <el-input v-model="loginForm.loginName" placeholder="用户名">
              <template slot="prepend"><span class="usernameIcon"></span></template>
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input type="password" placeholder="密码" v-model="loginForm.password" @keyup.enter.native="submit('loginForm')" @change="passwordChange">
              <template slot="prepend"><span class="passwordIcon"></span></template>
            </el-input>
          </el-form-item>
          <div class="login-btn">
            <el-button type="primary" @click="submit('loginForm')" :disabled="disabled">登录</el-button>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
  import ajax from '../../utils/ajax/index'
  export default {
    name: 'login',
    data () {
      return {
        loading: false,
        disabled: true,
        loginForm: {
          loginName: '',
          password: ''
        },
        rules: {
          loginName: [
            {required: true, message: '请输入账号', toggle: 'blur'}
          ],
          password: [
            {required: true, message: '请输入密码', toggle: 'blur'}
          ]
        }
      }
    },
    created () {
      this.result()
    },
    methods: {
      result () {
        let username = sessionStorage.getItem('username')
        if (username) {
          this.$router.push('/cityList')
        }
      },
      submit (name) {
        let url = this.api.login
        let store = this.$store
        this.loading = true
        this.$refs[name].validate((valid) => {
          if (valid) {
            let params = {
              loginName: this.loginForm.loginName,
              password: this.loginForm.password
            }
            ajax.post(url, params || {}, store).then((res) => {
              console.log(res.data.msg)
              if (res.msg.code === '20000') {
                let routerData = res.data.modules
                let accountId = res.data.Id
                // 存储 用户信息
                sessionStorage.setItem('username', JSON.stringify(this.loginForm.loginName))
                // 存储 路由
                sessionStorage.setItem('router', JSON.stringify(routerData))
                // 存储 账号id
                sessionStorage.setItem('accountId', accountId)
                // 添加动态路由
                this.$router.addRoutes(this.shiftyRouter(routerData))
                this.$router.push('/cityList')
              } else {
                this.$message({type: 'error', message: res.data.msg.message})
              }
              this.loading = false
            }).catch((err) => {
              if (err) throw err
              this.loading = false
              this.$message({type: 'error', message: '网络异常'})
            })
          } else {
            console.log('error')
          }
        })
      },
      passwordChange () {
        // 监听密码变化
        this.$refs.loginForm.validate((valid) => {
          valid ? this.disabled = false : this.disabled = true
        })
      }
    }
  }
</script>
